// @flow
import React from 'react'
import styles from './HeaderStep.css'
import { Tabs } from 'antd'
const TabPane = Tabs.TabPane
type Props ={
  step: number
}
export default class HeaderStep extends React.Component {
  props: Props
  render () {
    const { step } = this.props
    return (
      <div className={styles['header']}>
        <div className={styles['logo']}>
          <div className={styles['box']}>
            <img src={require('../../../public/kmx-log.png')} width='120' />
          </div>
        </div>
        <div className={styles['step']}>
          <div className={styles['step-box']}>
            <Tabs activeKey={String(step)}>
              <TabPane tab='CM配置' key='1' />
              <TabPane tab='KMX配置' key='2' />
              <TabPane tab='安装Docker' key='3' />
              <TabPane tab='角色分配' key='4' />
              <TabPane tab='服务安装' key='5' />
              <TabPane tab='安装完成' key='6' />
            </Tabs>
          </div>
        </div>
      </div>
    )
  }
}
